<template>
  <div id="pixi2"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { Application, Assets, Sprite } from "pixi.js";
const app = new Application();
// 动画加载
const loaderAnimate = async () => {
  const texture = await Assets.load("https://pixijs.com/assets/bunny.png");

  // Create a new Sprite from an image path
  const bunny = new Sprite(texture);

  // Add to stage
  app.stage.addChild(bunny);

  // Center the sprite's anchor point
  bunny.anchor.set(0.5);

  // Move the sprite to the center of the screen
  bunny.x = app.screen.width / 2;
  bunny.y = app.screen.height / 2;

  app.ticker.add((time) => {
    bunny.rotation += 0.1 * time.deltaTime;
  });
};

onMounted(async () => {
  await app.init({ background: "#1099bb", resizeTo: window });
  // await app.init({background:"#1099bb", width: 800, height: 600 });
  document.body.appendChild(app.canvas);
  loaderAnimate();
});
</script>

<style scoped></style>
